<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 二级学院信息管理</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/leaveApplyManage/leaveApprove.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<!--蓝色提示成功信息-->
<div id="notificationBlue" class="notificationBlue">
    <span id="messageBlue"></span>
</div>
<!--灰色提示普通信息-->
<div id="notificationGrey" class="notificationGrey">
    <span id="messageGrey"></span>
</div>
<!--黄色色提示警告信息-->
<div id="notificationYellow" class="notificationYellow">
    <span id="messageYellow"></span>
</div>
<!-- 头部 -->
<header th:insert="~{common/common::header}">
</header>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <div class="box">
        <form class="search-container" style="display: flex;flex-wrap: wrap" action="/leaveApply/approveLeaveList?pageNum=1&pageSize=7" id="searchForm">
            请假单号：<input type="text" class="search-box" placeholder="搜索..." name="leaveID">
            &nbsp;&nbsp;
            <label for="selectClass">学生班级：
                <select id="selectClass" style="width: 200px;height: 30px;" name="classID">
                    <option>请选择班级</option>
                </select>
            </label>
            &nbsp;&nbsp;
            学号：<input type="text" class="search-box" placeholder="搜索..." name="stuID">
            &nbsp;&nbsp;
            状态：未审核<input type="radio" value="0" name="statusLeave">
            &nbsp;&nbsp;
            同意<input type="radio" value="1" name="statusLeave">
            &nbsp;&nbsp;
            不同意<input type="radio" value="2" name="statusLeave">
            &nbsp;&nbsp;
            <label for="selectYear">学年：
                <select id="selectYear" style="width: 200px;height: 30px;" name="year">
                    <option>请选择学年</option>
                </select>
            </label>
            &nbsp;&nbsp;
            学期：上学期<input type="radio" value="上学期" name="term">
            &nbsp;&nbsp;
            下学期<input type="radio" value="下学期" name="term">
            &nbsp;&nbsp;
            <button class="search-button action-button" onclick="searchLeave()">搜索</button>
            &nbsp;&nbsp;
            <button class="reset-button action-button" onclick="reset()">重置</button>
        </form>
        <div>
            <button class="add-button action-button"  onclick="exportLeaveAll()">全部导出</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>请假单号</th>
                <th>学号</th>
                <th>学生姓名</th>
                <th>课程名称</th>
                <th>请假时间</th>
                <th>天数</th>
                <th>状态</th>
                <th>审核意见</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="leave,leaves:${pageVo.list}">
                <td th:text="${leave.leaveID}">数据1</td>
                <td th:text="${leave.stuID}">数据2</td>
                <td th:text="${leave.stuName}">数据2</td>
                <td th:text="${leave.courseName}">数据2</td>
                <td th:text="${leave.applyTime}">数据2</td>
                <td th:text="${leave.dayNum}">数据2</td>
                <td th:text="${leave.status == '0' ? '未审核':''}" th:if="${leave.status == '0'}" style="color: #9d9d3f"></td>
                <td th:text="${leave.status == '1' ? '同意':''}" th:if="${leave.status == '1'}" style="color: #2ecc71"></td>
                <td th:text="${leave.status == '2' ? '不同意':''}" th:if="${leave.status == '2'}" style="color: red"></td>
                <td th:text="${leave.opinion}">无</td>
                <td class="action-buttons">
                    <button id="editButton" class="action-button edit-button" th:onclick="previewLeave('[(${leave.leaveID})]') " th:if="${leave.status eq '0' }" >预览</button>
                    <button id="queryButton" class="action-button yellow-button" th:onclick="leaveInfo('[(${leave.leaveID})]') " th:if="${leave.status eq '1' || leave.status eq '2'} " >查看详情</button>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span th:text="'共'+${pageVo.getTotal()}+'条'"></span>
            <span class="page-link" id="beforePage" onclick="beforeChangePage()"> 上一页 </span>
            <span th:text="'页号：'+${pageVo.getPageNum()}"></span>
            <span class="page-link" id="afterPage" onclick="afterChangePage()"> 下一页 </span>
        </div>
    </div>
</main>
</body>

<script th:inline="javascript" type="text/javascript">

    var classList = [[${classes}]];
    var className = []
    classList.forEach(item => {
        className.push({
            "label":item.className,
            "value":item.classID
        })
    })
    var selectElement = document.getElementById("selectClass");
    className.forEach(option =>{
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.label;
        selectElement.appendChild(optionElement);
    })

    var yearList = [[${years}]];
    var years = []
    yearList.forEach(item => {
        years.push({
            "label":item,
            "value":item
        })
        console.log(item)
    })
    var selectYear = document.getElementById("selectYear");
    years.forEach(option =>{
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.label;
        selectYear.appendChild(optionElement);
    })

    // 获取全选复选框和所有行的复选框
    const selectAllCheckbox = document.getElementById("selectAllCheckbox");
    const checkboxes = document.querySelectorAll("tbody input[type='checkbox']");
    var leaveIds = [];
    // 添加点击事件监听器来处理全选/取消全选
    selectAllCheckbox.addEventListener("click", function () {
        leaveIds = [];
        checkboxes.forEach((checkbox) => {
            checkbox.checked = selectAllCheckbox.checked;
            console.log(checkbox.checked)
            if(selectAllCheckbox.checked){
                leaveIds.push(checkbox.value);
            }
        });
        if(!selectAllCheckbox.checked){
            leaveIds = [];
        }
    });

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener("change", function (event) {
            if (event.target.checked) {
                leaveIds.push(event.target.value)
            } else {
                leaveIds.splice(event.target.value,1);
            }
        });
    });

    function showNotification(id) {
        const notification = document.getElementById(id);
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 2000); // 3秒后自动消失
    }

    var data = [[${pageVo.list}]]
    console.log(data);

    var messageInfo = [[${resultInfo?.message}]];
    if(messageInfo != null){
        document.getElementById("messageBlue").innerHTML = messageInfo;
        this.showNotification("notificationBlue");
    }

    var pageNum = [[${pageVo.getPageNum()}]];
    var pageSum = [[${pageVo.pages}]]
    if(pageNum === 1){
        document.getElementById("beforePage").style.display = 'none';
    }
    if(pageNum === pageSum || pageSum === 0){
        document.getElementById("afterPage").style.display = 'none';
    }

    function beforeChangePage(){
        pageNum = pageNum - 1;
        window.location.href = '/leave/list?pageNum='+pageNum+'&pageSize=7';
    }

    function afterChangePage(){
        pageNum = pageNum + 1;
        window.location.href = '/leave/list?pageNum='+pageNum+'&pageSize=7';
    }

    function deleteDepartment(leaveID){
        if(confirm("确定要删除id为"+leaveID+"的二级学院信息吗？")){
            window.location.href = '/?leaveID='+leaveID;
        } else {
            document.getElementById("messageGrey").innerHTML = "取消删除";
            this.showNotification("messageGrey");
        }

    }

    function outLogin(){
        location.href = '/outLogin'
    }

    function previewLeave(leaveID){
        window.location.href = '/leaveApply/approveLeaveInfo?leaveID=' + leaveID;
    }

    function leaveInfo(leaveID){
        window.location.href = '/leaveApply/approveInfo?leaveID=' + leaveID;
    }

    function searchLeave(){
        var classID = document.getElementById("selectClass").value;
        var year = document.getElementById("selectYear").value;
        if(classID === '请选择班级'){
            document.getElementById("selectClass").value = '';
        }
        if(year === '请选择学年'){
            document.getElementById("selectYear").value = '';
        }
        document.getElementById("searchForm").submit();
    }

    function exportLeaveAll(){
        window.location.href = '/leaveApply/exportLeaveAll'
    }

    function reset(){
        document.getElementById("searchForm").reset;
    }
</script>

</html>